<template>
    <div class="box">
         <pdf style="width:100%;margin-top:0.625rem" class="pdf" ref="pdf" v-for="i in numPages" :key="i" :page="i" :src="textUrl"></pdf>
         <div class="button">
             <button @click="meun">-</button>
             <div class="slider">
                 <van-slider v-model="value" vertical min="100" max="200" step="1" @input="onChange" />
             </div>
             <button @click="changeBig">+</button>
         </div>

        <!-- 水印 -->
        <p style="top:2rem;">艾克瑞特于海洋</p>
        <p style="top:2rem;left:4rem">艾克瑞特于海洋</p>
        <p style="top:10rem">艾克瑞特于海洋</p>
        <p style="top:10rem;left:4rem">艾克瑞特于海洋</p>

        <!-- 顶部齿轮 -->
        <div class="chilun">
            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>: 
            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>: 
            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>
        </div>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
    components:{
        pdf
    },
    mounted() {
            let url = this.$route.query.url;
            this.textUrl =pdf.createLoadingTask(url);
            this.textUrl.promise.then(pdf => {
                this.numPages = pdf.numPages;
            }); 
    },
    data() {
        return {
            numPages:'',
            textUrl:'',
            scale: 100,
            value:100
        }
    },
    methods: {
        changeBig(){
            if(this.scale >= 200){
                return
            }
            this.scale += 20;
            this.value += 20;
            if(this.value > 200){
                this.value = 200
            }
            this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
            // this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
        },
        meun(){
            if(this.scale <= 100){
                return
            }
            this.scale -= 20;
            this.value -= 20;
            if(this.value < 100){
                this.value = 100
            }
            this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
        },
        onChange(value){
            console.log(value);
             this.scale = value;
              this.$refs.pdf.forEach(item => {
                item.$el.style.width = parseInt(this.scale) + "%";
            });
        }
    },
}
</script>
<style lang="scss" scoped>
    .box{
        height: 100%;
        width: 100%;
        overflow-x: auto;
    }
    .button{
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 0.2rem;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .slider{
        height: 8rem;
        padding: 0.4rem 0;
        box-sizing: border-box;
        margin-left: 0.1rem;
        opacity: .5;
    }
    button{
        border-radius: 50%;
        width: 0.6rem;
        height: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.4rem;
        color: #999;
        border: none;
        margin-left: 0.2rem;
        background: #eee;
        opacity: .5;
    }
    p{
        position: fixed;
        transform: rotate(-45deg);
        top: 1rem;
        left: 0.4rem;
        opacity: .2;
        color: #999;
        font-size: 0.4rem;
    }
    .chilun{
        position: fixed;
        top: 0.2rem;
        right: 0.24rem;
        display: flex;
        align-items: center;
       font-size: 0.16rem;
       .img{
           position: relative;
       }
        img{
            width: 0.54rem;
            height: 0.54rem;
        }
        span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
</style>